<template>

  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true">
        <el-button class="float-right" type="text" icon="el-icon-back" @click="handleBackFn">返回&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
      </el-form>
    </div>
    <el-descriptions title="标段信息" column="4">
      <el-descriptions-item label="项目名称">{{this.xmname}}</el-descriptions-item>
      <el-descriptions-item label="开标时间">{{this.kbkstime}}</el-descriptions-item>
      <el-descriptions-item label="开标室">{{this.kbroom}}</el-descriptions-item>
      <el-descriptions-item label="评标室">{{this.pbroom}}</el-descriptions-item>
    </el-descriptions>
    <br>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column prop="jdname" label="见证阶段" min-width="200" />
        <el-table-column prop="taskusername" label="见证人" min-width="200" />
        <el-table-column label="操作" align="center" header-align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="addDate(scope.row)"> 见证人分配 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑弹框 -->
    <el-dialog
      width="60%"
      :close-on-click-modal="false"
      draggable
      :show-close="false"
      title="见证人分配"
      :visible.sync="editTempl"
    >
      <div>
        <el-table ref="taskTable" v-loading="tableLoading" :data="usertableData" height="100%" @row-click="singleElection" highlight-current-row stripe>
          <el-table-column align="center" width="55" label="选择">
            <template slot-scope="scope">
              <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
              <el-radio class="radio" v-model="templateSelection" :label="scope.row.userid">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column type="index" align="left" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="见证人" min-width="300" />
          <el-table-column prop="djz" label="待见证数量" min-width="100" />
          <el-table-column prop="jzz" label="见证中数量" min-width="100" />
          <el-table-column prop="ywc" label="已完成数量" min-width="100" />
        </el-table>
      </div>
      <br>
      <el-checkbox v-model="alltype" @change="changeAll">本标段所有见证阶段分配给该见证人</el-checkbox>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="childType != 'view'" :loading="btnLoading" type="primary" @click="submitData()">确定</el-button>
        <el-button @click="cancel()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list,verifyTask,saveTask,verifyTaskCode } from "../../../../../../api/weeon/task/jzfp/jdlist";
export default {
  data() {
    // 这里存放数据
    return {
      btnLoading: false,
      childType: "",
      editTempl: false,
      xmname:"",
      kbkstime:"",
      kbroom:"",
      pbroom:"",
      tableData: [],
      usertableData: [],
      tableLoading: false,
      //   当前选择的行的id
      templateSelection: "",
      //   当前选择的行的数据
      checkList: [],
      selectjdcode:"",
      selectuserid:"",
      alltype: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.projectListFn();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  methods: {
    handleBackFn() {
      this.$router.push({ path: "/taskAllocation"});
    },
    changeAll(){

    },
    //分配
    async submitData(){
      if(this.alltype){
        let verifyparams = {
          bdguid: this.$route.query.bdguid
        };
        const res = await verifyTask(verifyparams);
        if (res.stat === 1) {
          const tasking = res.data.tasking;
          if(tasking === 0){
            let params = {
              bdguid: this.$route.query.bdguid,
              userid: this.selectuserid,
              taskcode: this.selectjdcode,
              allTaskStatus: true
            };
            this.saveTask(params);
          }else{
            this.$confirm(res.data.tasknames + "见证中无法分配，确定继续分配其它见证吗？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                let params = {
                  bdguid: this.$route.query.bdguid,
                  userid: this.selectuserid,
                  taskcode: this.selectjdcode,
                  allTaskStatus: true
                };
                this.saveTask(params);
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消操作",
                  single: true
                });
              });
          }
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      }else{
        let params = {
          bdguid: this.$route.query.bdguid,
          userid: this.selectuserid,
          taskcode: this.selectjdcode
        };
        this.saveTask(params);
      }
    },
    async saveTask(params){
      const res = await saveTask(params);
      if (res.stat === 1) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.editTempl = false;
        this.childType = "";
        this.projectListFn();
      }else{
        this.$message({
          type: "error",
          message: res.msg || "分配失败，请稍后再试",
          single: true
        });
      }
    },
    //取消
    cancel() {
      this.editTempl = false;
      this.childType = "";
    },
    singleElection(row) {
      this.templateSelection = row.userid;
      this.checkList = this.tableData.filter((item) => item.userid === row.userid);
      console.log(`该行的编号为${row.userid}`);
      this.selectuserid = row.userid;
    },
    // 数据列表
    async projectListFn() {
      try {
        this.tableLoading = true;
        this.tableData = [];
        let params = {
          bdguid: this.$route.query.bdguid,
        };
        const res = await list(params);
        this.tableLoading = false;
        if (res.stat === 1) {
          this.tableData = res.data.list;
          this.usertableData = res.data.userlist;
          this.xmname = res.data.bd.xmname;
          this.kbkstime = res.data.bd.kbkstime;
          this.kbroom = res.data.bd.kbroom;
          this.pbroom = res.data.bd.pbroom;
          this.tableData = res.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      } catch (error) {
        console.log(error);
        this.tableLoading = false;
      }
    },
    //新增操作
    async addDate(row) {
      let params = {
        bdguid: this.$route.query.bdguid,
        taskcode: row.jdcode
      };
      const res = await verifyTaskCode(params);
      if (res.stat === 1) {
        if(res.data === 0){
          this.selectjdcode = row.jdcode;
          this.editTempl = true;
          this.childType = "edit";
        }else{
          this.$message({
            type: "warning",
            message: "当前阶段见证中，无法分配"
          });
        }
      }else {
        this.$message({
          type: "error",
          message: res.msg || "获取数据失败，请稍后再试",
          single: true
        });
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.status-list {
  padding-top: 18px;
  span {
    padding-left: 20px;
    font-size: 12px;
    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -2px;
    }
  }
  .completed::before {
    background-color: #56b502;
  }
  .inWitness::before {
    background-color: #1890ff;
  }
  .notStarted::before {
    background-color: #b2b2b2;
  }
}
::v-deep.progress-list {
  .el-step {
    height: 26px;
    line-height: 26px;
    &::before {
      border-width: 13px;
    }
    &::after {
      border-width: 13px;
      right: -26px;
    }
    .cell {
      padding: 0 6px;
    }
    .el-step__title {
      line-height: 26px;
      text-align: center;
      i {
        color: #fc9306;
        // background-color: #fff;
      }
    }
  }
  // 已完成状态
  .status-completed {
    cursor: pointer;
    background: rgba(86, 181, 2, 0.2);
    &::after {
      border-left-color: rgba(86, 181, 2, 0.2);
    }
    .el-step__title {
      color: #56b502;
    }
  }
  .status-completed:hover {
    background: rgba(86, 181, 2);
    &::after {
      border-left-color: rgba(86, 181, 2);
    }
    .el-step__title {
      color: #fff;
    }
  }
  // 见证中状态
  .status-inWitness {
    cursor: pointer;
    background: rgba(24, 144, 255, 0.2);
    &::after {
      border-left-color: rgba(24, 144, 255, 0.2);
    }
    .el-step__title {
      color: #1890ff;
    }
  }
  .status-inWitness:hover {
    background: rgba(24, 144, 255);
    &::after {
      border-left-color: rgba(24, 144, 255);
    }
    .el-step__title {
      color: #fff;
    }
  }
  // 未开始状态
  .status-notStarted {
    background: rgba(153, 153, 153, 0.2);
    &::after {
      border-left-color: rgba(153, 153, 153, 0.2);
    }
  }
}
</style>
